import { useState } from 'react';
import style from './index.module.scss';
import bg from '@/assets/images/week-star/bg.png';
import Reward from '@/assets/images/week-star/reward-page.png';
import Rule from '@/assets/images/week-star/rule-page.png';
import Content from './content';
const Index = () => {
    const [showPage, setShowPage] = useState(0);
    const [type, setType] = useState(1); // 1甜蜜来袭 2爱情告白
    return (
        <>
            {showPage === 0 && (
                <div className={style.container}>
                    <img src={bg} alt="背景图" />
                    {/* <div
                        className={style.back}
                        onClick={() => closeFun()}
                    ></div> */}
                    <div
                        className={`${style.btn} ${style.btn1}`}
                        onClick={() => setShowPage(1)}
                    >
                        {/* 奖励 */}
                    </div>
                    <div
                        className={`${style.btn} ${style.btn2}`}
                        onClick={() => setShowPage(2)}
                    >
                        {/* 规则 */}
                    </div>
                    {/* <p className={style.date}>8月10日-8月17日</p> */}
                    <div className={style.btn_box}>
                        <div
                            className={`${style.btn_switch}  ${
                                type === 1
                                    ? style.btn_left_select
                                    : style.btn_left
                            }`}
                            onClick={() => setType(1)}
                        ></div>
                        <div
                            className={`${style.btn_switch} ${
                                type === 2
                                    ? style.btn_right_select
                                    : style.btn_right
                            } `}
                            onClick={() => setType(2)}
                        ></div>
                    </div>
                    {type === 1 && <Content type={1} />}
                    {type === 2 && <Content type={2} />}
                </div>
            )}
            {showPage === 1 && (
                <div className={style.questionWrap}>
                    <img src={Reward} alt="图片" />
                    <div
                        className={style.btn_back}
                        onClick={() => setShowPage(0)}
                    ></div>
                </div>
            )}
            {showPage === 2 && (
                <div className={style.questionWrap}>
                    <img src={Rule} alt="图片" />
                    <div
                        className={style.btn_back}
                        onClick={() => setShowPage(0)}
                    ></div>
                </div>
                // <div className={style.questionWrap1}>
                //     <div className={style.content_box}>
                //         <img src={Rule} alt="图片" />
                //         <div className={style.ruleDetail}>
                //             <p>
                //                 1.本活动时间为8月10日-8月17日，截止到8月17日23:59:59
                //                 <br />
                //                 2.甜蜜来袭排行榜前三名即可获得额外钻石奖励+虚拟道具奖励,（额外奖励需满足最低甜蜜值要求，第一名最低50000甜蜜值;第二名最低25000甜蜜值;第三名最低15000甜蜜值，达不到要求不予发放）
                //                 <br />
                //                 另外参与活动收七夕专属礼物的用户4~50名也可获得对应参与道具奖励
                //                 <br />
                //                 3.爱情告白排行榜点赞数最多的可获得额外钻石奖励+虚拟道具奖励（违规行为点赞取消发放奖励）
                //                 <br />
                //                 4.奖励发放时间将在活动结束后5个工作日发放，若奖励未到账，请请关注微信公众号「pupu找搭子」私聊进行领取
                //                 <br />
                //                 5.最终解释权归PUPU找搭子所有，该活动与苹果公司无关。
                //                 <br />
                //             </p>
                //         </div>
                //         <img
                //             className={style.flower_left}
                //             src={flowerL}
                //             alt=""
                //         />
                //         <img
                //             className={style.flower_right}
                //             src={flowerR}
                //             alt=""
                //         />
                //         <div
                //             className={style.btn_back_bottom}
                //             onClick={() => setShowPage(0)}
                //         ></div>
                //     </div>
                // </div>
            )}
        </>
    );
};

export default Index;
